<template>
  <div class="sty-setting">
    <Title v-if="isShowHeader" :title="title" :style="{marginBottom: title === '表格样式配置' ? '7px' : '16px'}"/>
    <el-row>
      <template v-for="(item, index) in moduleSetting">
        <el-col v-if="showModule(item)" :span="getSpanData(index, item)" :key="index" :class="{ 'module-style': item.title === '模块名称', 'no-dot': item.noDot, 'no-center': item.noCenter}">
          <div :class="{'axisX-style': item.title === '横轴样式', 'axisY-style': item.title === '纵轴样式'}" class="common-box">
            <span v-if="item.title !== '横轴样式' && item.title !== '纵轴样式'" class="common-title">{{ item.title }}</span>
            <span v-else class="common-title">{{ item.title === '横轴样式'?'坐标配置':'' }}</span>
            <div :class="`common-border ${item.extendClass || ''}`" :style="item.extendStyle || ''">
              <template v-for="(items, i) in item.config">
                <div v-if="!items.typeComp || items.typeComp === module" :class="`list-item ${items.extendClass || ''}`" :style="items.extendStyle || ''" :key="i">
                  <div v-if="!items.typeComp" class="common-item">
                    <span v-if="items.label" class="list-item-label">{{ items.label }}</span>
                    <!-- 颜色选择器 -->
                    <ColorPicker v-if="items.name === 'ColorPicker'" :gradient-color.sync="items.gradientColor" :is-gradient.sync="items.isGradient" :show-gradient="items.word === 'backgroundColor'" v-model="items.value" @change="getConfig" />
                    <!-- 正常下拉框选择 -->
                    <el-select
                      v-if="items.name === 'nomalSelect'"
                      v-model="items.value"
                      :style="items.width ? {width: items.width} : {width: '64px'}"
                      size="mini"
                      class="small-select normal"
                      placeholder="请选择"
                      @change="getConfig">
                      <template>
                        <el-option
                          v-for="i in items.options"
                          :key="i.value"
                          :label="i.label"
                          :value="i.value" />
                      </template>
                    </el-select>
                    <!-- 下拉框选择 -->
                    <el-select
                      v-if="items.name === 'Select'"
                      v-model="items.value"
                      :style="items.width ? {width: items.width} : {width: '56px'}"
                      filterable
                      class="small-select"
                      allow-create
                      size="mini"
                      placeholder="请选择"
                      @change="getConfig">
                      <template v-if="items.label === '边框大小'">
                        <el-option
                          v-for="i in 11"
                          :key="i-1"
                          :label="i-1"
                          :value="i-1" />
                      </template>
                      <template v-else>
                        <el-option
                          v-for="i in items.options"
                          :key="i"
                          :label="i"
                          :value="i" />
                      </template>
                    </el-select>
                    <!-- 单选-按钮样式 -->
                    <el-radio-group
                      v-if="items.name === 'RadioBtn'"
                      :size="items.size || 'mini'"
                      v-model="items.value">
                      <el-radio-button v-for="i in items.options" :key="i.value" :label="i.value">
                        <img :src="items.value === i.value ? i.activeUrl : i.url" alt="" class="img-icon" >
                      </el-radio-button>
                    </el-radio-group>
                    <!-- FontStyle -->
                    <template v-if="items.name === 'FontStyle'">
                      <div v-for="i in items.options" :key="i.value" class="font-item" @click="fontItem(items, i)">
                        <img :src="items.value.includes(i.value) ? i.activeUrl : i.url" alt="" class="img-icon" >
                      </div>
                    </template>
                    <!-- 多选框组 -->
                    <el-checkbox-group v-if="items.name === 'CheckboxGroup'" v-model="items.value" class="check-box">
                      <el-checkbox v-for="i in items.options" :label="i.value" :key="i.value">{{ i.label }}</el-checkbox>
                    </el-checkbox-group>
                    <!-- 开关 -->
                    <el-switch v-if="items.name === 'Switch'" v-model="items.value" class="fb-switch" @change="getConfig" />
                    <el-input-number
                      v-if="items.name === 'InputNumber'"
                      v-model="items.value"
                      :min="items.min || 0"
                      :max="items.max || 100"
                      v-bind="items.props"
                      :class="{'no-btn': items.noBtn}"
                      :style="items.width?{width: items.width}:''"
                      class="input-number"
                      size="small" />
                    <el-input
                      v-if="items.name === 'textarea'"
                      :rows="5"
                      v-model="items.value"
                      type="textarea"
                      class="width240"
                      placeholder="请输入内容"/>
                    <!-- 输入框 -->
                    <el-input
                      v-if="items.name === 'Text'"
                      v-model="items.value"
                      :maxlength="items.maxlength"
                      :size="items.size || 'small'"
                      class="width240"
                      placeholder="请输入内容"/>
                    <!-- 显隐类型 -->
                    <template v-if="items.name === 'Revealing'">
                      <!-- 隐藏标签 -->
                      <el-tooltip :content="`${items.value ? '隐藏' : '显示'}${items.label}`" placement="top">
                        <img :src="items.value ? hide : show" alt="" class="img-icon" @click="items.value = !items.value">
                      </el-tooltip>
                    </template>
                    <!-- 备注 -->
                    <div v-if="items.name === 'Remark'" class="flex-center check-box">
                      <el-input v-model="items.value.value" :maxlength="items.maxlength" class="width240" size="small" placeholder="请输入内容"/>
                      <el-tooltip :content="`${!items.value.showRemark ? '隐藏' : '显示'}${items.label}`" placement="top">
                        <img :src="items.value.showRemark ? show : hide" alt="" class="img-icon ml5" @click="items.value.showRemark = !items.value.showRemark">
                      </el-tooltip>
                    </div>
                  </div>
                  <div v-if="items.typeComp === module" class="common-item">
                    <span v-if="items.label" style="font-size: 14px;margin-right: 12px;color: #666">{{ items.label }}</span>
                    <!-- 上传背景图片 -->
                    <div v-if="items.name === 'upload'" class="upload-box">
                      <upAttachment
                        ref="uploadImg"
                        :import-api="importApi"
                        :hide-confirm="true"
                        :hide-clip-up="true"
                        :title-bg="true"
                        :is-upload="isUpload"
                        :bg-img="items.value"
                        is-diy
                        accept="image/gif,image/jpeg,image/jpg,image/png"
                        style="width: 50px;"
                        @beforeUpload="beforeUpload"
                        @complateSetData="complateSetData($event, items)"
                        @removeFileList="removeFileList($event, items)">
                        <div v-loading="imgLoading" class="img-container">
                          <el-tooltip v-if="items.value" :open-delay="800" class="item" placement="top" effect="dark">
                            <div slot="content">
                              <img :src="items.value" style="max-width: 200px;max-height: 300px;cursor:pointer;" alt="" @click="openLink(items.value)">
                            </div>
                            <img :src="items.value" class="img" alt="">
                          </el-tooltip>
                          <i v-else class="el-icon-plus avatar-uploader-icon"/>
                        </div>
                      </upAttachment>
                      <div v-if="items.value" class="clear-img" @click="clearImg(items)">x</div>
                    </div>
                    <!-- 单选组 -->
                    <el-radio-group v-if="items.name === 'radioGroup'" v-model="items.value" @change="getConfig">
                      <el-radio v-for="(val, j) in items.options" :key="j" :label="val.label">{{ val.name }}</el-radio>
                    </el-radio-group>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </el-col>
      </template>
    </el-row>
  </div>
</template>
<script>
import Title from '@/components/Title';
import upAttachment from '@/components/Common/upAttachment/index';
// import moduleSetting from './mixins/styData';
import { styleConfig } from './mixins/styleData';
import ColorPicker from './colorPicker';
import downloadIcon from '@/assets/import.png';
import ImportList from '@/mixins/importList';
import hide from '@/assets/reportManage/hide.png';
import show from '@/assets/reportManage/show.png';

export default {
  components: { Title, upAttachment, ColorPicker },
  mixins: [ImportList],
  props: {
    module: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '样式配置'
    },
    isShowHeader: {
      type: Boolean,
      default: true
    },
    showModuleName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show,
      hide,
      downloadIcon,
      moduleSetting: JSON.parse(JSON.stringify(styleConfig)),
      importApi: '/admin/charts/upload',
      isUpload: true,
      imgLoading: false
    };
  },
  methods: {
    setDefault(oldData) {
      // 把接口返回的数据注入到 moduleSetting
      if (oldData) {
        try {
          const setting = JSON.parse(oldData);
          if (setting instanceof Object) {
            this.moduleSetting.forEach(i => {
              if (setting[i.id] && i.config) {
                i.config.forEach(j => {
                  if (setting[i.id][j.word] || setting[i.id][j.word] === 0) {
                    j.value = setting[i.id][j.word];
                  }
                  // 背景渐变
                  if (j.word === 'backgroundColor') {
                    j.isGradient = setting[i.id].isGradient;
                    j.gradientColor = setting[i.id].gradientColor;
                  }
                });
              }
            });
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    getStyle(extendParams = {}) { // 最终生成数据
      const style = {};
      this.moduleSetting.forEach(items => {
        const obj = {};
        if (items.config && items.config.length) {
          items.config.forEach(j => {
            obj[j.word] = j.value;
            // 背景渐变
            if (j.word === 'backgroundColor') {
              obj.isGradient = j.isGradient;
              obj.gradientColor = j.gradientColor;
            }
          });
        }
        style[items.id] = obj;
      });
      Object.assign(style, extendParams);
      return JSON.stringify(style);
    },
    getConfig() {
      this.$emit('getConfig', this.moduleSetting);
    },
    beforeUpload(file) {
      this.imgLoading = true;
    },
    removeFileList(index, items) {
      items.value = '';
    },
    complateSetData({ data, fileName }, items) {
      items.value = data.url;
      this.imgLoading = false;
      this.getConfig();
    },
    clearImg(items) {
      items.value = '';
      this.getConfig();
    },
    getSpanData(index, item = {}) {
      if (this.module === 'tag' || this.module === 'ring') {
        return index % 2 === 0 ? 14 : 10;
      } else if (item.rowSpan) {
        return item.rowSpan;
      }
      return 24;
    },
    /**
     * tool
     */
    openLink(url) {
      window.open(url);
    },
    showModule(item) {
      const isCommon = !item.useModule || item.useModule.length === 0;
      const isUseModule = item.useModule.includes(this.module);
      const isWithout = item.without ? item.without.includes(this.module) : false;
      if (this.module === 'tag' && item.id === 'moduleName' && this.showModuleName) return true;
      return (isCommon || isUseModule) && !isWithout;
    },
    fontItem(items, i) {
      if (items.value.includes(i.value)) {
        const index = items.value.indexOf(i.value);
        if (index > -1) {
          items.value.splice(index, 1);
        }
      } else {
        items.value.push(i.value);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.sty-setting {
  .width240 {
    width: 240px;
    &::v-deep {
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .common-box {
    display: flex;
    flex-direction: column;
    margin:0 0 10px 12px;
    .common-title {
      position: relative;
      width: 80px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 600;
      color: #333;
      line-height: 32px;
      white-space: nowrap;
      text-align: left;
      margin-bottom: 8px;
    }
    .common-title::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 15px;
      width: 4px;
      height: 4px;
      background: #406eff;
    }
    .common-border {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      // @media screen and (max-width: 1200px) {
      //   flex-flow:row wrap;
      // }
    }

    .list-item {
      flex-shrink: 0;
      &:last-child {
        .common-item {
          margin-right: 0 !important;
        }
      }
      .list-item-label {
        font-size: 14px;
        margin-right: 6px;
        color: #666;
        flex-shrink: 0;
      }
    }
    .common-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 32px;
      .font-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 8px;
        border: 1px solid #DCDFE6;
        border-left: 1px solid #DCDFE6 !important;
        border-radius: 4px 0 0 4px !important;
        cursor: pointer;
      }
      .font-item:last-child {
        border-left: none !important;
        border-radius: 0 4px 4px 0 !important;
      }
      &::v-deep {
        .el-color-picker, .el-color-picker .el-color-picker__trigger {
          width: 64px;
          height: 32px;
          border-radius: 4px;
        }
        .el-radio-button__inner {
          background: #fff;
          border-color: #DCDFE6;
          box-shadow: none;
          padding: 10px 8px;
        }
        .el-input__inner{
          width: 100% ;
        }
        .medium-file-uploader {
          width: 64px;
          height: 50px;
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          .bg-uploader-icon {
            font-size: 16px;
            color: #8c939d;
            width: 64px;
            height: 50px;
            line-height: 50px;
            text-align: center;
          }
          .bg {
            width: 64px;
            height: 50px;
            display: block;
          }
        }
        .el-radio{
          margin-right: 14px;
          .el-radio__label{
            font-size: 14px;
            padding-left: 4px !important;
          }
        }
      }

      .upload-box {
        position: relative;
      }
      .clear-img {
        width: 12px;
        height: 12px;
        line-height: 12px;
        text-align: center;
        position: absolute;
        top: -2px;
        right: -2px;
        background: #406EFF;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      }
    }
    .border {
      display: flex;
      padding: 0 8px;
      &::v-deep {
        .el-color-picker__trigger {
          padding: 4px;
          border-radius: 4px;
          border-color: #ddd;
        }
        .small-select {
          width: 64px !important;
          &.normal {
            width: 120px !important;
          }
          .el-input {
            height: 32px;
            line-height: 32px;
            .el-input__suffix {
              right: 0;
            }
            .el-select__caret {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;
            }
          }
          .el-input__inner {
            height: 32px;
            border-radius: 4px;
            line-height: 32px;
            padding-right: 14px;
          }
        }
      }
    }
  }
  .input-number {
    width: 100px;
    &.no-btn {
      &::v-deep {
        .el-input-number__decrease,.el-input-number__increase {
          display: none;
        }
      }
    }
  }
}
.mr0 {
  .common-item {
    margin-right: 0px !important;
  }
}
.position-absolute {
  position: absolute;
}
.img-container {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 32px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  .avatar-uploader-icon {
    font-size: 15px;
    color: #8c939d;
  }
  .img {
    width: 100%;
    height: 100%;
  }
}
.select-width-120 {
  &::v-deep {
    .el-select {
      width: 120px !important;
      .el-input__inner {
        border-radius: 4px;
      }
    }
  }
}
.axisX-style {
  margin-bottom: 0 !important;
  .border {
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}
.axisY-style {
  .border {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .common-title::before {
    display: none;
  }
}
.no-dot {
  .common-box {
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    margin-left: -3px;
    .common-title {
      color: #666;
      font-weight: normal;
      text-align: right;
      margin-right: 6px !important;
    }
  }
  .common-title::before {
    display: none;
  }
}
.no-center {
  .common-box {
    flex-direction: row;
    align-items: flex-start;
  }
}
.remark-label {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  margin: 0 8px 0 4px;
}
.check-box {
  display: flex;
  align-items: center;
  ::v-deep {
    .el-checkbox {
      margin-right: 12px;
    }
  }
}
.img-icon {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
</style>
